/*Color brand*/
:root {
    --camel: #f8eee6;
    --lightBlue: #b9d7f2;
    --pink: #f6b6b8;
    --purple: #6B2138;
    --orange: #e95226;
    --yellow: #d0c460;
    --brown: #4d4342;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/*Polices d'écriture*/
@font-face {
    font-family: 'poppins';
    src: url('../fonts/Poppins-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'lora';
    src: url('../fonts/Lora-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
/* FOOTER */

footer ::selection {
    background: var(--pink);
    color: var(--purple);
}

.basDePage {
    background-color: var(--purple);
    color: var(--yellow);
    width: 100%;
    position: relative;
    font-family: 'poppins', sans-serif;
    padding: 2vw 0;
    overflow: hidden;
}

.feuilleVerte {
    width: 320px;
    position: absolute;
    right: -30px;
    top: 20px;
    z-index: 0;
    opacity: 0.7;
}

/* LOGO */
.logoBasDePage {
    height: auto;
    width: 250px;
    
}

/* CONTENEUR CENTRAL */
.coordonneesRessources {
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 1;
    margin-bottom: 20px;
}

/* 2 COLONNES */
.liensBasDePage {
    display: flex;
    gap: 60px;
}

/* HEADERS DE COLONNES */
.headerColonne {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 80px;
    margin-bottom: 10px;

}

/* PLACEHOLDER POUR ALIGNEMENT */
.logoPlaceholder {
    width: 60px;
}

/* COLONNES */
.coordonnees {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
}

.ressources {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.colonesRessources{
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: center;
}

.legalite{
  display: block;
  text-align: center; 
  white-space: nowrap;   
}

.ressources a {
    color: var(--blue);
    text-decoration: none;
    text-align: center;
}

/* LIENS CONTACT */
.imageLien {
    display: flex;
    align-items: center;
    gap: 10px;
}

.contactPicture {
    width: 30px;
    height: 30px;
}

.contactLink,
.legalite {
    color: var(--blue);
    text-decoration: none;
}

/* HOVER (optionnel) */
.contactLink:hover,
.legalite:hover {
    text-decoration: underline;
}

.contentBasDePage{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-evenly;
    gap: 40px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Responsive */

/* Tablettes et petits écrans */
@media screen and ((orientation: portrait) and (min-aspect-ratio: 2/3) and (max-width: 1024px)),
       screen and ((orientation: landscape) and (max-width: 1366px) and (hover: none)),
       screen and ((min-width: 769px) and (max-width: 1024px)) {
    .basDePage {
        padding: 30px 0;
    }

    .feuilleVerte {
        width: 280px;
        right: -40px;
        opacity: 0.5;
    }

    .contentBasDePage {
        gap: 30px;
    }

    .logoBasDePage {
        width: 160px;
    }

    .liensBasDePage {
        gap: 40px;
    }
}

/* Tablettes portrait et mobiles larges */
@media screen and ((orientation: portrait) and (max-aspect-ratio: 2/3)),
       screen and ((max-width: 768px) and (hover: none) and (pointer: coarse)) {
    .basDePage {
        padding: 25px 0;
    }

    .feuilleVerte {
        width: 200px;
        right: -20px;
        top: 10px;
        opacity: 0.4;
    }

    .contentBasDePage {
        flex-direction: column;
        align-items: center;
        gap: 30px;
        padding: 0 15px;
    }

    .logoBasDePage {
        width: 140px;
        margin: 0 auto 20px;
    }

    .coordonneesRessources {
        flex-direction: column;
        gap: 30px;
        width: 100%;
    }

    .liensBasDePage {
        flex-direction: column;
        gap: 30px;
        width: 100%;
    }

    .headerColonne {
        justify-content: center;
        min-height: auto;
        gap: 10px;
    }

    .coordonnees,
    .ressources {
        width: 100%;
        gap: 12px;
    }

    .contactLink, 
    .legalite {
        font-size: 14px;
    }
}

/* Mobiles - Petits écrans */
@media screen and ((max-width: 480px) and (hover: none) and (pointer: coarse)),
       screen and ((orientation: portrait) and (max-width: 480px)) {
    .basDePage {
        padding: 20px 0;
    }

    .feuilleVerte {
        width: 150px;
        right: -15px;
        top: 5px;
        opacity: 0.3;
    }

    .logoBasDePage {
        width: 120px;
        margin-bottom: 15px;
    }

    .contentBasDePage {
        gap: 20px;
        padding: 0 10px;
    }

    .coordonneesRessources {
        gap: 20px;
    }

    .liensBasDePage {
        gap: 20px;
    }

    .headerColonne {
        font-size: 16px;
        gap: 8px;
    }

    .contactPicture {
        width: 25px;
        height: 25px;
    }

    .contactLink, 
    .legalite {
        font-size: 13px;
    }

    .imageLien {
        gap: 8px;
    }

    .logoPlaceholder {
        width: 40px;
    }
}